import React, { useState, useCallback, useMemo } from 'react';
import { AnimatePresence, motion, easeInOut } from 'framer-motion';
import { getDynamicFonts } from '@/utils/fontUtils';
import { useTranslation, Trans } from 'react-i18next';

interface CollapsePanelProps {
  title: React.ReactNode;
  children: React.ReactNode;
  className?: string;
  defaultOpen?: boolean;
}

const CollapsePanel: React.FC<CollapsePanelProps> = React.memo(({ title, children, className = '', defaultOpen = false }) => {
  const [open, setOpen] = useState(defaultOpen);
  const [showContent, setShowContent] = useState(defaultOpen);
  const { t, i18n } = useTranslation();
  const dynamicFonts = getDynamicFonts(i18n);

  // 🚀 性能优化：使用useCallback缓存事件处理函数
  const handleToggle = useCallback(() => { 
    if (open) {
      setOpen(false);
    } else {
      setShowContent(true);
      setOpen(true);
    }
  }, [open]);

  // 🚀 性能优化：使用useMemo缓存容器样式
  const containerStyle = useMemo(() => ({
    backgroundColor: open ? undefined : 'rgb(24,24,27)',
    fontFamily: dynamicFonts.font1
  }), [open, dynamicFonts.font1]);

  // 🚀 性能优化：使用useMemo缓存标题样式
  const titleStyle = useMemo(() => ({
    fontFamily: dynamicFonts.font3,
    lineHeight: '1.5rem',
    paddingTop: 0,
    paddingBottom: 0,
    marginTop: 0,
    marginBottom: 0
  }), [dynamicFonts.font3]);

  // 🚀 性能优化：使用useMemo缓存动画配置
  const animationConfig = useMemo(() => ({
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 },
    transition: { duration: 0.4, ease: easeInOut }
  }), []);

  return (
    <div
      className={`w-full mb-5 border border-[color:var(--Pop-Up-Stroke,#282828)] bg-zinc-900 relative transition-all duration-500 rounded-[10px] overflow-hidden flex flex-col justify-center min-h-12 ${className} ${open ? 'bg-gradient-to-r from-[#4D1D28] to-[#1F1F1F]' : ''}`}
      style={containerStyle}
    >
      <dt
        className="flex sm:text-1xl text-1xl items-center justify-between select-none px-3 cursor-pointer h-[4.5rem] min-h-12"
        onClick={handleToggle}
      >
        <h3
          style={titleStyle}
          className="text-white md:text-[20px] text-[0.9rem] font-medium leading-none py-0 max-md:max-w-full"
        >
          {title}
        </h3>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className={`h-5 w-5 text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </dt>
      <AnimatePresence
        initial={false}
        onExitComplete={() => setShowContent(false)}
      >
        {showContent && open && (
          <motion.dd
            key="content"
            layout
            {...animationConfig}
            style={{ overflow: 'hidden' }}
            aria-hidden={!open}
            className="space-y-4 p-3"
          >
            <div className="text-neutral-400 md:text-base text-sm font-medium w-full leading-relaxed">
              {children}
            </div>
          </motion.dd>
        )}
      </AnimatePresence>
    </div>
  );
});

CollapsePanel.displayName = 'CollapsePanel';

export default CollapsePanel; 